Ainult CSS-i akordionid: Üksikute avanevate vidinate loomine parema kasutajakogemuse saavutamiseks

Akordionid on kaasaegse veebidisaini põhielement, pakkudes puhast ja tõhusat viisi suure hulga teabe esitamiseks seeditavas vormingus. Need on eriti kasulikud KKK-de, tootekirjelduste ja navigeerimismenüüde jaoks. See artikkel süveneb ainult CSS-i kasutavate akordionite loomisesse, millel on ühe avatava osa käitumine, mis tähendab, et korraga saab avatud olla ainult üks akordioni jaotis. See lähenemine parandab kasutajakogemust, vältides sisu üleküllust ja soodustades keskendunud sirvimist.

Ainult CSS-i kasutavate akordionite eeliste mõistmine

Traditsioonilised JavaScriptil põhinevad akordionid nõuavad sageli oleku haldamist ja sündmuste käsitlemist, mis võib teie koodile keerukust lisada. Ainult CSS-i kasutavad akordionid seevastu kasutavad CSS-i selektorite ja `:checked` pseudoklassi võimsust, et saavutada soovitud funktsionaalsus ilma JavaScriptile tuginemata. Tulemuseks on:

• Parem jõudlus: JavaScripti eemaldamine vähendab lehe laadimisaega ja parandab üldist jõudlust.
• Parem ligipääsetavus: Ainult CSS-i kasutavaid akordioneid saab hõlpsasti ligipääsetavaks muuta, kasutades korrektset HTML-i semantikat ja ARIA atribuute.
• Lihtsustatud hooldus: Vähem koodi tähendab lihtsamat hooldust ja vigade otsimist.
• Parem SEO: Puhas HTML ja CSS võivad parandada otsingumootoritele optimeerimist.

Ehituskivid: HTML-struktuur

Meie ainult CSS-i kasutava akordioni aluseks on hästi struktureeritud HTML-märgistus. Kasutame järgmisi elemente:

• <input type="radio">: Raadionuppe kasutatakse tagamaks, et korraga on avatud ainult üks jaotis. `name` atribuut on raadionuppude grupeerimiseks ülioluline.
• <label>: Sildid on seotud raadionuppudega ja toimivad akordioni päistena.
• <div>: Konteiner akordioni sisu hoidmiseks.

Siin on põhiline HTML-struktuur:

<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">1. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>1. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">2. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>2. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">3. jaotise pealkiri</label>
  <div class="accordion-content">
    <p>3. jaotise sisu.</p>
  </div>
</div>

Selgitus:

• `accordion-container` klassi kasutatakse akordioni üldise struktuuri kujundamiseks.
• Iga akordioni jaotis koosneb `input` (raadionupp), `label` ja sisu sisaldavast `div`-ist.
• Raadionuppude `name` atribuudi väärtuseks on seatud "accordion", et neid grupeerida, tagades, et korraga saab valida ainult ühe.
• `label` atribuut `for` vastab vastava `input` elemendi `id`-le, sidudes sildi raadionupuga.

Akordioni kujundamine CSS-iga

Nüüd lisame CSS-i, et kujundada akordion ja rakendada ühe avatava osa käitumine.

.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Peida sisu algselt */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Näita sisu, kui raadionupp on märgitud */
}

Selgitus:

• .accordion-container: Kujundab konteineri äärisjoone ja veeristega.
• input[type="radio"]: Peidab raadionupud, kuna soovime kuvada ainult silte.
• label: Kujundab sildid akordioni päiste sarnaseks.
• .accordion-content: Peidab sisu algselt, kasutades `display: none`.
• input[type="radio"]:checked + label: Kujundab sildi, kui vastav raadionupp on märgitud.
• input[type="radio"]:checked + label + .accordion-content: See on ühe avatava osa käitumise võti. See kasutab külgneva venna selektorit (+) `accordion-content` sihtimiseks, mis järgneb vahetult märgitud raadionupu `label`-ile, ja seab selle `display` väärtuseks `block`, muutes selle nähtavaks.

Ligipääsetavuse parandamine ARIA atribuutidega

Et tagada meie akordioni ligipääsetavus puuetega kasutajatele, peame lisama ARIA atribuudid. ARIA (Accessible Rich Internet Applications) atribuudid pakuvad semantilist teavet abistavatele tehnoloogiatele, näiteks ekraanilugejatele.

Siin on, kuidas saame ligipääsetavust parandada:

<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">1. jaotise pealkiri</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>1. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">2. jaotise pealkiri</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>2. jaotise sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">3. jaotise pealkiri</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>3. jaotise sisu.</p>
  </div>
</div>

Selgitus:

• role="presentation" konteineril peidab konteineri semantilise tähenduse, võimaldades pesastatud ARIA rollidel struktuuri õigesti edastada.
• aria-controls: Näitab elementi, mida praegune element kontrollib (antud juhul sisu jaotis).
• aria-expanded: Näitab, kas kontrollitav element on praegu laiendatud või ahendatud. Kuigi me ei muuda seda dünaamiliselt JavaScriptiga, on hea tava see lisada ja keerulisem näide võiks selle väärtuse lülitamiseks kasutada JavaScripti. Algväärtuseks on seatud `false`.
• role="region": Tuvastab sisu jaotise kui eraldiseisva piirkonna lehel.
• aria-labelledby: Tuvastab sildi, mis kirjeldab sisu jaotist.

Olulised kaalutlused ligipääsetavuse osas:

• Klaviatuuriga navigeerimine: Veenduge, et kasutajad saaksid akordioni jaotiste vahel navigeerida klaviatuuri abil (nt Tab-klahv).
• Ekraanilugeja ühilduvus: Testige akordioni ekraanilugejaga, et veenduda sisu korrektses ettelugemises.
• Värvikontrast: Tagage piisav värvikontrast teksti ja tausta vahel nägemispuudega kasutajate jaoks.

Kohandamine ja täiustused

Põhilist ainult CSS-i kasutavat akordioni saab edasi kohandada ja täiustada, et see vastaks konkreetsetele disaininõuetele.

Üleminekute lisamine

Sujuvama kasutajakogemuse loomiseks saame akordioni sisule lisada CSS-üleminekuid.

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Lisa üleminek */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Määra ülemineku jaoks maksimaalne kõrgus */
}

Selgitus:

• Lisasime `.accordion-content` klassile `transition` omaduse, et animeerida `max-height` omadust.
• Sisu peitmiseks seadsime algseks `max-height` väärtuseks `0`.
• Kui raadionupp on märgitud, seame `max-height` piisavalt suurele väärtusele (nt `500px`), et sisu saaks sujuvalt laieneda. `overflow: hidden` takistab sisu ülevoolamist ülemineku ajal, kui tegelik sisu kõrgus on väiksem kui 500px.

Ikoonidega kujundamine

Ikoonide lisamine akordioni päistele võib parandada visuaalset atraktiivsust ja kasutaja arusaamist. Selleks saate kasutada CSS-i pseudoelemente või fondiikoone.

CSS-i pseudoelementide kasutamine:

label::after {
  content: '+'; /* Algne ikoon */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Muuda ikooni, kui on laiendatud */
}

Fondiikoonide kasutamine (nt Font Awesome):

1. Lisage oma HTML-i Font Awesome'i CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
2. Kasutage oma siltides vastavaid Font Awesome'i klasse:

<label for="section1">1. jaotise pealkiri <i class="fas fa-plus"></i></label>

Seejärel kasutage CSS-i, et muuta ikooni, kui jaotis on laiendatud:

input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* sisesta miinusikoon */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus unicode */
    float:right;
}

Reageeriva disaini kaalutlused

Veenduge, et teie akordion töötaks hästi erineva suurusega ekraanidel, kasutades reageeriva disaini tehnikaid. Saate kasutada meediapäringuid, et kohandada akordioni stiili vastavalt ekraani laiusele.

Näide:

@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Kohanda laius väiksemate ekraanide jaoks */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Kohanda fondi suurust */
  }
}

Täiustatud tehnikad

Kuigi põhiline ainult CSS-i kasutav akordion pakub kindla aluse, on olemas täiustatud tehnikaid, mis võivad selle funktsionaalsust ja kasutajakogemust veelgi parandada.

Oleku säilitamine Local Storage'iga

Saate kasutada JavaScripti (kuigi see läheb vastuollu puhta CSS-i lähenemisega) ja Local Storage'it, et meeles pidada akordioni olekut, nii et kui kasutaja lehele naaseb, on varem avatud jaotised endiselt avatud.

Dünaamiline sisu laadimine

Suure sisumahuga akordionite jaoks saate sisu dünaamiliselt laadida AJAX-i abil. See võib parandada lehe esialgset laadimisaega ja vähendada ribalaiuse kasutust.

Levinud probleemide tõrkeotsing

Siin on mõned levinud probleemid, millega võite ainult CSS-i kasutavate akordionite rakendamisel kokku puutuda, ja kuidas neid lahendada:

• Akordion ei tööta:
  • Veenduge, et raadionuppude `name` atribuut oleks kõigi jaotiste puhul sama.
  • Kontrollige, et `label` atribuut `for` vastaks vastava `input` elemendi `id`-le.
  • Kontrollige oma CSS-i selektorites trükivigu või vigu.
• Sisu ei peitu algselt:
  • Veenduge, et `.accordion-content` klassile oleks rakendatud `display: none` stiil.
• Üleminekud ei tööta:
  • Kontrollige, et `transition` omadus oleks rakendatud õigele elemendile (`.accordion-content`).
  • Veenduge, et `max-height` oleks algselt seatud väärtusele `0` ja piisavalt suurele väärtusele, kui raadionupp on märgitud.
• Ligipääsetavuse probleemid:
  • Kasutage akordioni testimiseks ekraanilugejat ja tuvastage kõik ligipääsetavuse probleemid.
  • Veenduge, et ARIA atribuudid oleksid õigesti rakendatud.

Reaalse elu näited

Ainult CSS-i kasutavaid akordioneid saab kasutada mitmesugustes reaalsetes stsenaariumides:

• KKK lehed: Korduma kippuvate küsimuste esitamine lühidalt ja organiseeritult.

  Näide: Ülikooli veebisait, mis kasutab akordioni rahvusvaheliste üliõpilaste sisseastumist puudutavate KKK-de kuvamiseks, hõlmates teemasid nagu viisanõuded, õppemaksud erinevates valuutades ja majutusvõimalused.

• Tootekirjeldused: Toote üksikasjade, spetsifikatsioonide ja arvustuste kuvamine.

  Näide: E-kaubanduse veebisait, mis kasutab akordioni toote erinevate aspektide näitamiseks, nagu tehnilised andmed (pinge, mõõtmed), materjali koostis ja päritoluriik globaalsele vaatajaskonnale.

• Navigeerimismenüüd: Laiendatavate menüüde loomine keeruliste navigeerimisstruktuuridega veebisaitidele.

  Näide: Keerulise organisatsioonilise struktuuriga valitsuse veebisait, mis kasutab akordioneid osakondade ja teenuste jaotamiseks erineva taustaga kodanikele, tagades, et sisu on kergesti ligipääsetav olenemata keelest või valitsusega tuttavusest.

• Vormid: Pikkade vormide jaotamine hallatavateks osadeks.

  Näide: Veebipõhine taotlusvorm ülemaailmse stipendiumiprogrammi jaoks, mis kasutab akordioneid jaotiste eraldamiseks, nagu isikuandmed, akadeemiline ajalugu ja finantsteave, parandades kasutajakogemust erinevate haridussüsteemidega eri riikidest pärit taotlejate jaoks.

Kokkuvõte

Ainult CSS-i kasutavad akordionid, millel on ühe avatava osa funktsionaalsus, pakuvad võimsat ja tõhusat viisi kasutajakogemuse ja ligipääsetavuse parandamiseks teie veebisaidil. Kasutades CSS-i selektorite ja ARIA atribuutide võimsust, saate luua interaktiivseid elemente, mis on jõudsad, hooldatavad ja ligipääsetavad laiale kasutajaskonnale. Olenemata sellest, kas loote lihtsat KKK lehte või keerulist veebirakendust, aitavad ainult CSS-i kasutavad akordionid teil teavet esitada selgelt ja kaasahaaravalt, aidates kaasa paremale üldisele kasutajakogemusele globaalsele publikule.

Täiendavad õppematerjalid

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
• ARIA Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/
• WebAIM: https://webaim.org/